<template>
  <div class="container">
    <div class="left">
      <div class="left-1">
        <div class="left-1-1">
          <div>
            <span>{{ satellite?.name_en }} </span>
            <img v-if="satellite?.country === '俄罗斯'" :src="elsFlag" alt="" style="width: 18px; height: 18px" />
            <img v-if="satellite?.country === '美国'" :src="usFlag" alt="" style="width: 18px; height: 18px" />
          </div>
          <div>
            <span>轨道状态：{{ orbitStatusMap.get(Number(satellite?.orbit_status)) }}</span>
          </div>
          <div>
            <span>卫星类型：{{ satellite?.sat_type }}</span>
          </div>
        </div>
        <div>
          <img :src="getImgServerPath(satellite?.img!)" alt="" style="width: 150px; height: 150px" />
        </div>
        <div>
          <div class="desc-item">
            <span>发射时间</span> <span>{{ satellite?.launch_date }}</span>
          </div>
          <div class="desc-item">
            <span>国际编号</span> <span>{{ satellite?.int_id }}</span>
          </div>
        </div>
        <div>
          <div class="desc-item">
            <span>研制单位</span> <span>{{ satellite?.contractors }}</span>
          </div>
          <div class="desc-item">
            <span>研制国家</span> <span>{{ satellite?.country }}</span>
          </div>
        </div>
      </div>
      <div class="left-2">
        <div class="left-2-1">
          <span>研制背景</span>
        </div>
        <div class="left-2-2">
          <div>
            {{ satellite?.description }}
          </div>
        </div>
      </div>
      <div class="left-3">
        <div class="left-3-item">
          <span>{{ satellite?.a }}</span>
          <span>半长轴（KM）</span>
        </div>
        <div class="left-3-item">
          <span>{{ satellite?.e }}</span>
          <span>偏心率</span>
        </div>
        <div class="left-3-item">
          <span>{{ satellite?.i }}</span>
          <span>倾角</span>
        </div>
        <div class="left-3-item">
          <span>{{ satellite?.cycle }}</span>
          <span>周期（分钟）</span>
        </div>
      </div>
      <div class="left-4">
        <div class="left-4-title">装备配置</div>
        <div class="left-4-1">
          <span>卫星配置</span><span>{{ satellite?.configuration }}</span>
        </div>
        <div class="left-4-1">
          <span>卫星燃料</span><span>{{ satellite?.propulsion }}</span>
        </div>
        <div class="left-4-1">
          <span>电力装置</span><span>{{ satellite?.power }}</span>
        </div>
        <div class="left-4-1">
          <span>卫星平台</span><span>{{ satellite?.equipment }}</span>
        </div>
      </div>
      <div class="left-5">
        <div class="left-5-title">基本参数</div>
        <div class="img-box">
          <img :src="weixingcanshu" alt="" srcset="" />
        </div>
        <div class="left-5-1">
          <span>质量</span><span>{{ satellite?.mass }}kg</span>
        </div>
        <div class="left-5-1">
          <span>使用寿命</span><span>{{ satellite?.lifetime }}</span>
        </div>
        <div class="left-5-1">
          <span>目标形状</span><span>{{ satellite?.shape }}</span>
        </div>
        <div class="left-5-1">
          <span>目标尺寸（米）</span><span>{{ satellite?.span }}</span>
        </div>
        <div class="left-5-1">
          <span>目标直径（米）</span><span>{{ satellite?.diameter }}</span>
        </div>
        <div class="left-5-1">
          <span>横截面最大值（平方米）</span><span>{{ satellite?.xsectmax }}</span>
        </div>
        <div class="left-5-1">
          <span>横截面最小值（平方米）</span><span>{{ satellite?.xsectmin }}</span>
        </div>
        <div class="left-5-1">
          <span>横截面均值（平方米）</span><span>{{ satellite?.xsectavg }}</span>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="center-top">
        <div class="center-top-tabs">
          <span
            v-for="item in analysis"
            :key="item.id"
            @click="activeName = item.name"
            :class="{ 'tab-item': true, active: activeName === item.name }"
            >{{ item.name }}</span
          >
        </div>
        <div v-if="activeName === '特殊行为分析'" class="tab-1">
          <div class="tab-1__type">
            <div class="tab-1__type__btns">
              <el-button
                :class="activeType === '1' ? 'active' : ''"
                size="small"
                effect="plain"
                @click="activeType = '1'"
                >USA-314(2021-04-26)</el-button
              >
              <el-button
                :class="activeType === '2' ? 'active' : ''"
                size="small"
                effect="plain"
                @click="activeType = '2'"
                >USA-290(2019-01-19)</el-button
              >
              <el-button
                :class="activeType === '3' ? 'active' : ''"
                size="small"
                effect="plain"
                @click="activeType = '3'"
                >USA-245(2013-08-28)</el-button
              >
              <el-button
                :class="activeType === '4' ? 'active' : ''"
                size="small"
                effect="plain"
                @click="activeType = '4'"
                >USA-224(2011-01-20)</el-button
              >
              <el-button
                :class="activeType === '5' ? 'active' : ''"
                size="small"
                effect="plain"
                @click="activeType = '5'"
                >USA-186(2005-10-19)</el-button
              >
            </div>
          </div>

          <div class="tab-1__bd">
            <div class="tab-1__bd_tabs">
              <span :class="activeBD === '行为与活动' ? 'active' : ''" @click="activeBD = '行为与活动'"
                >行为与活动</span
              >
              <span :class="activeBD === '重点机动记录' ? 'active' : ''" @click="activeBD = '重点机动记录'"
                >重点机动记录</span
              >
            </div>
          </div>
          <div class="tab-1_bd__content" v-if="activeBD === '行为与活动'">
            <div class="tab-1_bd__content__left">
              <img :src="wx_video" alt="" srcset="" style="height: auto; width: 100%" />
            </div>

            <div class="tab-1_bd__content__right">
              <div class="grid-title">
                <div class="his">
                  <div>历史数据检测</div>
                  <div>最终对象数据(纪元：2025-05-08T05:04:59.966Z)</div>
                </div>
                <div class="time">
                  <div class="timetitle">时间范围</div>
                  <el-select v-model="selectedDay" placeholder="" class="select" size="small">
                    <el-option label="近30天" value="30"> </el-option>
                  </el-select>
                </div>
              </div>
              <div class="grid-count">
                <div>
                  <span>6,778km</span>
                  <span>半长轴</span>
                </div>
                <div><span>0.001</span> <span>偏心率</span></div>
                <div><span>97.5度</span> <span>轨道倾角</span></div>
                <div><span>12 小时</span> <span>升交点赤经</span></div>
                <div><span>270 度</span> <span>近地点辐角</span></div>
                <div><span>94度</span> <span>平近点角</span></div>
              </div>
              <div class="mod-tabs-box">
                <div class="mod-tabs">
                  <span :class="activeAction === '轨道机动行为' ? 'active' : ''" @click="activeAction = '轨道机动行为'"
                    >轨道机动行为</span
                  >
                  <span :class="activeAction === '姿态机动行为' ? 'active' : ''" @click="activeAction = '姿态机动行为'"
                    >姿态机动行为</span
                  >
                  <span
                    :class="activeAction === '无线电异常行为' ? 'active' : ''"
                    @click="activeAction = '无线电异常行为'"
                    >无线电异常行为</span
                  >
                  <span :class="activeAction === '覆盖区域' ? 'active' : ''" @click="activeAction = '覆盖区域'"
                    >覆盖区域</span
                  >
                </div>
                <div class="mod-content" v-if="activeAction === '轨道机动行为'">
                  <div class="l-box">
                    <div>
                      <span>45/月</span>
                      <span>轨道机动频率</span>
                    </div>
                    <div>
                      <span>1888</span>
                      <span>轨道机动次数</span>
                    </div>
                  </div>
                  <div class="r-box">
                    <!-- 图表位置 -->
                    <div class="charts1" id="charts1" style="height: 100%; width: 100%"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === '装备载荷能力'" class="tab-2">
          <div class="grid-zh">
            <div class="l-zh">
              <div class="title">基础通用纬度</div>
              <div class="grid-ty">
                <div><span>载荷名称/型号</span><span>KH-11KEN</span></div>
                <div><span>设计寿命</span><span>5至10年</span></div>
                <div><span>载荷类型</span><span>光学侦察传感器</span></div>
                <div><span>安全密级</span><span>绝密</span></div>
                <div class="span2">
                  <span>制造商</span>
                  <span>洛克希德·马丁公司、波音公司</span>
                </div>
                <div class="span2">
                  <span>尺寸</span>
                  <span>长约10米，宽约3米，高约3米（估算）</span>
                </div>
                <div><span>功耗</span><span>高（千瓦级别）</span></div>
                <div><span>散热需求</span><span>高</span></div>
                <div class="span2-col">
                  <span>通信载荷</span>
                  <span>高速数据传输载荷、安全通信载荷</span>
                </div>
                <div class="span2-col">
                  <span>生存性与加固</span>
                  <span>抗辐射：具备抗辐射能力，可抵御太空辐射环境</span>
                  <span>抗EMP：具备抗电磁脉冲能力，防止EMP攻击</span>
                  <span>热防护：采用高效的热防护系统，确保在极端温度下正常运行</span>
                </div>
                <div class="span2-col">
                  <span>指向需求</span>
                  <span>成像：需要精确的指向控制，确保成像的准确性</span>
                  <span>定向通信/干扰：支持定向通信和干扰能力，具体细节未公开</span>
                </div>
              </div>
            </div>
            <div class="r-zh">
              <div class="cs-box">
                <div class="mod-tabs-box">
                  <div class="mod-tabs">
                    <span :class="activeCs1 === '成像载荷参数' ? 'active' : ''" @click="activeCs1 = '成像载荷参数'"
                      >成像载荷参数</span
                    >
                    <span :class="activeCs1 === '成像载荷特点' ? 'active' : ''" @click="activeCs1 = '成像载荷特点'"
                      >成像载荷特点</span
                    >
                  </div>
                  <div class="cs-content" v-if="activeCs1 === '成像载荷参数'">
                    <div>传感器类型：金色传感器</div>
                    <div>工作谱段：可见光-近红外（VNIR）</div>
                    <div>频率：0.4至1.1微米</div>
                    <div>空间分辨率：亚米级（具体数值未公开）</div>
                    <div>地面采样距离：约0.5米</div>
                    <div>幅宽：宽，覆盖效率高（具体数值未公开）</div>
                    <div>视场角：广角，支持大范围成像</div>
                    <div>成像模式：推扫式成像、凝视成像</div>
                    <div>夜间成像能力：具备夜视能力，能够在低光照条件下成像</div>
                    <div>云雾传统能力：具备一定的云雾穿透能力，提高成像的可靠性</div>
                  </div>
                </div>
              </div>
              <div class="cs-box">
                <div class="mod-tabs-box">
                  <div class="mod-tabs">
                    <span :class="activeCs2 === '遥感载荷参数' ? 'active' : ''" @click="activeCs2 = '遥感载荷参数'"
                      >遥感载荷参数</span
                    >
                    <span :class="activeCs2 === '遥感载荷特点' ? 'active' : ''" @click="activeCs2 = '遥感载荷特点'"
                      >遥感载荷特点</span
                    >
                  </div>
                  <div class="cs-content" v-if="activeCs2 === '遥感载荷参数'">
                    <div>传感器类型：金色传感器</div>
                    <div>工作谱段：可见光-近红外（VNIR）</div>
                    <div>频率：0.4至1.1微米</div>
                    <div>空间分辨率：亚米级（具体数值未公开）</div>
                    <div>地面采样距离：约0.5米</div>
                    <div>幅宽：宽，覆盖效率高（具体数值未公开）</div>
                    <div>视场角：广角，支持大范围成像</div>
                    <div>成像模式：推扫式成像、凝视成像</div>
                    <div>夜间成像能力：具备夜视能力，能够在低光照条件下成像</div>
                    <div>云雾传统能力：具备一定的云雾穿透能力，提高成像的可靠性</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === '作战威胁分析'" class="tab-3">
          <div class="l-wx">
            <div class="mod-tabs-box">
              <div class="mod-tabs">
                <span :class="activeWX === '基础威胁能力' ? 'active' : ''" @click="activeWX = '基础威胁能力'"
                  >基础威胁能力</span
                >
                <span :class="activeWX === '战时威胁能力' ? 'active' : ''" @click="activeWX = '战时威胁能力'"
                  >战时威胁能力</span
                >
              </div>
              <div class="wx-content" v-if="activeWX === '基础威胁能力'">
                <div class="wx-item">
                  <div>ISR(情报、监视与侦察)</div>
                  <div>
                    <div>威胁等级：<el-tag type="danger">高</el-tag></div>
                    <div>置信度：<el-tag type="primary">70%</el-tag></div>
                  </div>
                  <div>
                    威胁能力：KH-11卫星具备高分辨率成像和多光谱侦察能力，能够监视我方的地面设施、军事部署等，获取敏感情报。
                  </div>
                  <div>威胁目标：地面目标（如军事基地、通信设施）、空中目标（如飞机、无人机）、海上目标（如舰船）</div>
                  <div>
                    威胁描述：KH-11卫星能够通过光学侦察获取我方关键设施的位置、如布局和活动情况，为敌方提供实时情报支持。
                  </div>
                </div>
                <div class="wx-item">
                  <div>SIGNT(信号情报窃听)</div>
                  <div>
                    <div>威胁等级：<el-tag type="danger">中</el-tag></div>
                    <div>置信度：<el-tag type="primary">70%</el-tag></div>
                  </div>
                  <div>
                    威胁能力：KH-11卫星具备高分辨率成像和多光谱侦察能力，能够监视我方的地面设施、军事部署等，获取敏感情报。
                  </div>
                  <div>威胁目标：地面目标（如军事基地、通信设施）、空中目标（如飞机、无人机）、海上目标（如舰船）</div>
                  <div>
                    威胁描述：KH-11卫星能够通过光学侦察获取我方关键设施的位置、如布局和活动情况，为敌方提供实时情报支持。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="r-wx">
            <div class="title">历史威胁及意图分析</div>
            <div class="nav-bar">
              <span>目标国家</span>
              <el-select v-model="mbgj" placeholder="请选择" size="small" class="select">
                <el-option label="请选择" value="请选择" />
                <el-option label="中国" value="中国" />
                <el-option label="美国" value="美国" />
              </el-select>
              <span>时间范围</span>
              <el-select v-model="sjfw" placeholder="" size="small" class="select">
                <el-option label="近30天" value="1" />
                <el-option label="近半年" value="2" />
                <el-option label="近一年" value="3" />
              </el-select>
            </div>
            <div class="lswx-content">
              <div class="lswx-item">
                <div class="top1">
                  <span>威胁编号001</span>
                  <span
                    ><el-text type="primary" size="small" class="btn" @click="switchBtnClick">{{
                      btnLabel
                    }}</el-text></span
                  >
                </div>
                <div class="title-yc">
                  <span>威胁等级：<el-tag type="danger">高</el-tag></span>
                  <span>置信度：<el-tag type="primary">70%</el-tag></span>
                </div>
                <div class="yc-content" v-if="btnLabel === '收起'">
                  <div>异常行为：</div>
                  <div>KH-11卫星在2022年多次调整轨道，增加对中国南海地区的侦察频率。</div>
                  <div>在中国东部沿海地区（如上海、青岛）上空的过境次数显著增加。</div>
                  <div>政治背景：</div>
                  <div>中美在南海的领土争议加剧，美国频繁派遣军舰通过南海。</div>
                  <div>中国在南海的人工岛礁建设和军事部署受到国际关注。</div>
                  <div>异动记录：</div>
                  <div>2022年6月：KH-11卫星在南海上空的过境时间延长，拍摄了多个中国人工岛礁的高分辨率图像。</div>
                  <div>2022年10月：KH-11卫星调整轨道，覆盖中国东部沿海的军事基地和港口。</div>
                  <div>威胁意图推测：</div>
                  <div>监视中国在南海的军事部署和人工岛礁建设。</div>
                  <div>侦察中国东部沿海的军事设施，评估潜在的军事威胁。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === '卫星网络分析'" class="tab-6">
          <div class="grid-wl">
            <div class="l-wl">
              <img :src="wxwl" alt="" srcset="" />
            </div>
            <div class="r-wl">
              <div class="mod-tabs-box">
                <div class="mod-tabs">
                  <span :class="activeWL === '卫星网络结构' ? 'active' : ''" @click="activeWL = '卫星网络结构'"
                    >卫星网络结构</span
                  >
                  <span :class="activeWL === '网络配合方式' ? 'active' : ''" @click="activeWL = '网络配合方式'"
                    >成像载荷特点</span
                  >
                  <span :class="activeWL === '网络覆盖情况' ? 'active' : ''" @click="activeWL = '网络覆盖情况'"
                    >网络覆盖情况</span
                  >
                  <span :class="activeWL === '网络设备组成' ? 'active' : ''" @click="activeWL = '网络设备组成'"
                    >网络设备组成</span
                  >
                </div>
                <div class="wl-content" v-if="activeWL === '卫星网络结构'">
                  <div class="wl-title">侦察网络</div>
                  <div class="wl-content">侦察卫星与信号情报（SIGNT）卫星、电子侦察卫星等配合，提供多源情报支持。</div>
                  <div class="wl-title">核心卫星</div>
                  <div class="wl-content">
                    <div class="content">负责执行高分辨率光学侦察任务，拍摄地球表面的详细图像。</div>
                    <div class="imgbox">
                      <div>
                        <img :src="wx1" alt="" srcset="" />
                        <div>KH-11 ×5~6</div>
                      </div>
                    </div>
                  </div>
                  <div class="wl-title">协同卫星</div>
                  <div class="wl-content">
                    <div class="content">协同工作，形成多卫星侦察网络</div>
                    <div class="imgbox">
                      <div>
                        <img :src="wx1" alt="" srcset="" />
                        <div>KH-12 ×3~4</div>
                      </div>
                      <div>
                        <img :src="wx2" alt="" srcset="" />
                        <div>NOAA-19 ×3~4</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === '技术特点分析'" class="tab-4">
          <div class="tab-1__type">
            <div class="tab-1__type__btns">
              <el-button :class="jstdType === '1' ? 'active' : ''" size="small" effect="plain" @click="jstdType = '1'"
                >光学系统</el-button
              >
              <el-button :class="jstdType === '2' ? 'active' : ''" size="small" effect="plain" @click="jstdType = '2'"
                >传感器系统</el-button
              >
              <el-button :class="jstdType === '3' ? 'active' : ''" size="small" effect="plain" @click="jstdType = '3'"
                >轨道设计</el-button
              >
              <el-button :class="jstdType === '4' ? 'active' : ''" size="small" effect="plain" @click="jstdType = '4'"
                >数据处理及传输</el-button
              >
            </div>
            <div class="tab-1__time">
              <div class="tab-1__timetitle">时间范围</div>
              <el-select v-model="selectedDay" placeholder="" class="select" size="small">
                <el-option label="近30天" value="30"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="tab-4__content">
            <div class="l-box">
              <div class="l-box__title">光学系统设计特点</div>
              <div>
                <div>大口径反射镜</div>
                <p>
                  KH-11采用了大口径的反射镜设计，能够捕获更多的光线，从而提高成像的分辨率和质量。这种设计使得KH-11能够在
                  远距离拍摄出清晰的图像，支持对地球表面的详细侦察。
                </p>
              </div>
              <div>
                <div>大口径反射镜</div>
                <p>
                  KH-11采用了大口径的反射镜设计，能够捕获更多的光线，从而提高成像的分辨率和质量。这种设计使得KH-11能够在
                  远距离拍摄出清晰的图像，支持对地球表面的详细侦察。
                </p>
              </div>
              <div>
                <div>大口径反射镜</div>
                <p>
                  KH-11采用了大口径的反射镜设计，能够捕获更多的光线，从而提高成像的分辨率和质量。这种设计使得KH-11能够在
                  远距离拍摄出清晰的图像，支持对地球表面的详细侦察。
                </p>
              </div>
            </div>
            <div class="r-box">
              <div class="r-box__title">设计结构图</div>
              <div class="img-box">
                <img :src="wxsjt" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeName === '衍生型号分析'" class="tab-5">
          <div class="tab-2__type">
            <div class="tab-2__time">
              <div class="tab-2__timetitle">时间范围</div>
              <el-select v-model="selectedDay" placeholder="" class="select" size="small">
                <el-option label="近30天" value="30"> </el-option>
              </el-select>
            </div>
          </div>
          <div class="tab-5__content">
            <div class="l-box">
              <div class="title-box">型号列表</div>
              <div class="img-box">
                <div class="img-item">
                  <img :src="wx1" alt="" srcset="" />
                  <div>KH-12</div>
                </div>
                <div class="img-item">
                  <img :src="wx2" alt="" srcset="" />
                  <div>KH-11B</div>
                </div>
                <div class="img-item">
                  <img :src="wx3" alt="" srcset="" />
                  <div>迷雾卫星</div>
                </div>
              </div>
            </div>
            <div class="r-box">
              <div class="title-box">发展过程</div>
              <div
                class="content-box"
                v-html="
                  `一、发展背景
胶片时代痛点
早期 Corona/KH-9 必须依赖胶片舱再入回收，周期 3–30 天，一旦胶卷耗尽卫星即报废，无法持续覆盖危机地区。
数字转型需求
1971 年尼克松政府批准“实时数字侦察”计划，要求把图像转成电信号直接下传，缩短情报获取时间由数周降至数小时，KH-11 因此诞生。
首星发射
1976 年 12 月 19 日 USA-22（NSSDC 编号 1976-125A）由 Titan-3D 送入 280×520 km、97° 太阳同步轨道，正式开启美军“实时杀伤链”时代。`
                "
              ></div>
            </div>
          </div>
        </div>
      </div>

      <div class="center-bottom">
        <div class="center-bottom_tabs">
          <span :class="activeSJ === '相关事件' ? 'active' : ''" @click="activeSJ = '相关事件'">相关事件</span>
          <span :class="activeSJ === '情报监测' ? 'active' : ''" @click="activeSJ = '情报监测'">情报监测</span>
          <span :class="activeSJ === '仿真情报' ? 'active' : ''" @click="activeSJ = '仿真情报'">仿真情报</span>
        </div>
        <div class="center-bottom_content" v-if="activeSJ === '相关事件'">
          <el-timeline style="width: 100%; padding: 10px">
            <el-timeline-item color="#2367a0" v-for="(timeline, index) in timelines" :key="index">
              <div class="grid-box">
                <div class="grid-box_l">
                  <div>
                    <el-tag :type="tag.type" v-for="tag in timeline.tags">{{ tag.name }}</el-tag>
                  </div>
                  <div>
                    <span>{{ timeline.timestamp }}</span>
                  </div>
                </div>
                <div class="grid-box_r">
                  <div>{{ timeline.title }}</div>
                  <div>{{ timeline.content }}</div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="center-bottom_content" v-if="activeSJ === '情报监测'">
          <div class="qbjc-search">
            <span>情报类型</span>
            <span
              ><el-select v-model="qblx" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="视频" value="1" />
                <el-option label="音频" value="2" />
                <el-option label="文字" value="3" /> </el-select
            ></span>
            <span>情报来源</span>
            <span
              ><el-select v-model="qbly" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="装备拍摄" value="1" />
                <el-option label="信号截获" value="2" />
                <el-option label="时间范围" value="3" /> </el-select
            ></span>
            <span>时间范围</span>
            <span
              ><el-select v-model="sjfw" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="近30天" value="1" />
                <el-option label="近半年" value="2" />
                <el-option label="近一年" value="3" /> </el-select
            ></span>
          </div>
          <div class="qbjc-content">
            <div class="qbjc-item" v-for="item in qbjcList" :key="item.id">
              <div class="qbjc-img">
                <img :src="item.img" alt="" />
              </div>
              <div class="qbjc-title">{{ item.title }}</div>
              <div class="qbjc-source">
                <span>情报来源</span> <span>{{ item.source }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="center-bottom_content" v-if="activeSJ === '仿真情报'">
          <div class="qbjc-search">
            <span>情报类型</span>
            <span
              ><el-select v-model="qblx" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="视频" value="1" />
                <el-option label="音频" value="2" />
                <el-option label="文字" value="3" /> </el-select
            ></span>
            <span>情报来源</span>
            <span
              ><el-select v-model="qbly" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="装备拍摄" value="1" />
                <el-option label="信号截获" value="2" />
                <el-option label="时间范围" value="3" /> </el-select
            ></span>
            <span>时间范围</span>
            <span
              ><el-select v-model="sjfw" placeholder="请选择" size="small" style="width: 100px">
                <el-option label="近30天" value="1" />
                <el-option label="近半年" value="2" />
                <el-option label="近一年" value="3" /> </el-select
            ></span>
          </div>
          <div class="fzqb-content">
            <div class="fzqb-item" v-for="item in fzqbList" :key="item.id">
              <div class="fzqb-title">{{ item.title }}</div>
              <div class="fzqb-article">{{ item.content }}</div>
              <div class="fzqb-source">
                <span>来源：</span> <span>{{ item.source }}</span> <span>时间：</span> <span>{{ item.time }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right_tabs">
        <span :class="activeZB === '装备优势' ? 'active' : ''" @click="activeZB = '装备优势'">装备优势</span>
        <span :class="activeZB === '装备弱点' ? 'active' : ''" @click="activeZB = '装备弱点'">装备弱点</span>
      </div>
      <div class="right_tabs_content">
        <div class="right_tabs_content_item">
          <span class="title">覆盖关键军事基地，实时检测军事情报</span>
          <div class="item">
            <div class="item-title">
              KH-11卫星通过轨道高度的增加，拓展了对关键军事基地的覆盖范围，能够实时监测这些基地的动态，
              提供及时的军事情报支持。
            </div>
            <div class="son">
              <div class="son-tag">优势特征</div>
              <div class="son-item">轨道高度从680公里增加到720公里，覆盖范围扩大到约110公里宽的带状区域。</div>
              <div class="son-item">高分辨率成像能力够捕捉军事基地内的细节，如导弹发射装置、飞机和部队部署。</div>
            </div>
          </div>
        </div>
        <div class="right_tabs_content_item">
          <span class="title">与电子侦察卫星配合，增强目标定位能力</span>
          <div class="item">
            <div class="item-title">
              KH-11卫星通过轨道高度的增加，拓展了对关键军事基地的覆盖范围，能够实时监测这些基地的动态，
              提供及时的军事情报支持。
            </div>
            <div class="son">
              <div class="son-tag">优势特征</div>
              <div class="son-item">轨道高度从680公里增加到720公里，覆盖范围扩大到约110公里宽的带状区域。</div>
              <div class="son-item">高分辨率成像能力够捕捉军事基地内的细节，如导弹发射装置、飞机和部队部署。</div>
            </div>
          </div>
        </div>
        <div class="right_tabs_content_item">
          <span class="title">覆盖战略轨道，支持海上监控任务</span>
          <div class="item">
            <div class="item-title">
              KH-11卫星通过轨道高度的增加，拓展了对关键军事基地的覆盖范围，能够实时监测这些基地的动态，
              提供及时的军事情报支持。
            </div>
            <div class="son">
              <div class="son-tag">优势特征</div>
              <div class="son-item">轨道高度从680公里增加到720公里，覆盖范围扩大到约110公里宽的带状区域。</div>
              <div class="son-item">高分辨率成像能力够捕捉军事基地内的细节，如导弹发射装置、飞机和部队部署。</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue'
const route = useRoute()
import * as echarts from 'echarts'
import usFlag from '@/assets/img/profile/us.svg'
import elsFlag from '@/assets/img/profile/els.svg'
import wx_video from '@/assets/img/profile/wx_video.png'
import qbjc1 from '@/assets/img/profile/qb1.png'
import wx1 from '@/assets/img/profile/wx1.png'
import wx2 from '@/assets/img/profile/wx2.png'
import wx3 from '@/assets/img/profile/wx3.png'
import qbjc2 from '@/assets/img/profile/qb2.png'
import qbjc3 from '@/assets/img/profile/qb3.png'
import wxsjt from '@/assets/img/profile/wxsjt.png'
import wxwl from '@/assets/img/profile/wxwl.png'
import weixingcanshu from '@/assets/img/profile/weixingcanshu.png'
import { useRoute } from 'vue-router'
import { getSatelliteDetail } from '@/api/dashboard'
import { getImgServerPath } from '@/utils/func/funcs'
const analysis = ref([
  {
    id: '1',
    name: '特殊行为分析',
  },
  {
    id: '2',
    name: '装备载荷能力',
  },

  {
    id: '3',
    name: '作战威胁分析',
  },
  {
    id: '4',
    name: '卫星网络分析',
  },
  {
    id: '5',
    name: '技术特点分析',
  },
  {
    id: '6',
    name: '衍生型号分析',
  },
])
const activeName = ref('特殊行为分析')
const orbitStatusMap = new Map<number, string>([
  [0, '未知'],
  [1, '在轨'],
  [2, '离轨'],
])

const selectedDay = ref('30')
const activeType = ref('1')
const jstdType = ref('1')
const activeBD = ref('行为与活动')
const activeAction = ref('轨道机动行为')
const activeSJ = ref('相关事件')
const activeZB = ref('装备优势')
const activeCs1 = ref('成像载荷参数')
const activeCs2 = ref('遥感载荷参数')
const activeWL = ref('卫星网络结构')
const activeWX = ref('基础威胁能力')
const mbgj = ref('请选择')
const timelines = ref([
  {
    title: '美国间谍卫星有多狂？曾公开发图威慑伊朗，中国亮出反制手段',
    content:
      '1976年，美国航天史上发生了个大事儿，那就是他们发射了第一颗KH-11侦察卫星。这颗卫星上装了个超牛的玩意儿，一个2.4米大的光学镜头。',
    timestamp: '2018年04月15日',
    tags: [
      { name: '高危', type: 'danger' },
      { name: '对敌有害', type: 'success' },
    ],
  },
  {
    title: '全网最细的KH11系列间谍卫星解析-未来太空战争利器？',
    content: '以色列绝密间谍卫星调查-摩萨德之眼的用途与发展',
    timestamp: '2018年04月15日',
    tags: [
      { name: '高危', type: 'danger' },
      { name: '对敌有害', type: 'success' },
    ],
  },
  {
    title: 'KH-11卫星：技术革新与全球影响的深入探讨',
    content: 'KH-11卫星，这款在加利福尼亚州的桑尼维尔由洛克希德公司精心制造的间谍卫星。于1976年12月迎来它的首次发射。',
    timestamp: '2018年04月15日',
    tags: [
      { name: '高危', type: 'danger' },
      { name: '对敌有害', type: 'success' },
    ],
  },
  {
    title: '美国‘锁眼’间谍卫星有多利害？太空清晰看清人脸，各国如何防卫',
    content: '美国国家侦察局（NRO）是美国最神秘的情报机构之一，负责管理和运营美国的间谍卫星。',
    timestamp: '2018年04月15日',
    tags: [
      { name: '高危', type: 'danger' },
      { name: '对敌有害', type: 'success' },
    ],
  },
])

const qblx = ref('1')
const qbly = ref('1')
const sjfw = ref('1')
const qbjcList = ref([
  {
    id: '1',
    img: qbjc1,
    title: 'F-35隐形战机在日本青森县附近空域训练',
    content: '',
    source: '装备拍摄',
    video: '',
    audio: '',
    time: '2025年10月15日',
  },
  {
    id: '2',
    img: qbjc2,
    title: 'F-35隐形战机在日本青森县附近空域训练',
    content: '',
    source: '装备拍摄',
    video: '',
    audio: '',
  },
  {
    id: '3',
    img: qbjc3,
    title: 'F-35隐形战机在日本青森县附近空域训练',
    content: '',
    source: '装备拍摄',
    video: '',
    audio: '',
  },
])
const fzqbList = ref([
  {
    id: '1',
    img: qbjc1,
    title: 'F-35B垂直起降编队任务仿真报告',
    content:
      '本报告聚焦于F-35B垂直起降战斗机在编队任务中的表现，通过仿真模拟其在航母起降、空中突袭和快速支援任务中的性能。报告指出，F-35B在垂直起降和短距起降条件下表现出色，但在复杂气象条件下，其编队协同能力需要进一步优化。仿真结果为F-35B的战术改进提供了重要参考。',
    source: 'xxxx仿真模拟实验室',
    video: '',
    audio: '',
    time: '2025年10月15日',
  },
  {
    id: '1',
    img: qbjc1,
    title: 'F-35B垂直起降编队任务仿真报告',
    content:
      '本报告聚焦于F-35B垂直起降战斗机在编队任务中的表现，通过仿真模拟其在航母起降、空中突袭和快速支援任务中的性能。报告指出，F-35B在垂直起降和短距起降条件下表现出色，但在复杂气象条件下，其编队协同能力需要进一步优化。仿真结果为F-35B的战术改进提供了重要参考。',
    source: 'xxxx仿真模拟实验室',
    video: '',
    audio: '',
    time: '2025年10月15日',
  },
  {
    id: '1',
    img: qbjc1,
    title: 'F-35B垂直起降编队任务仿真报告',
    content:
      '本报告聚焦于F-35B垂直起降战斗机在编队任务中的表现，通过仿真模拟其在航母起降、空中突袭和快速支援任务中的性能。报告指出，F-35B在垂直起降和短距起降条件下表现出色，但在复杂气象条件下，其编队协同能力需要进一步优化。仿真结果为F-35B的战术改进提供了重要参考。',
    source: 'xxxx仿真模拟实验室',
    video: '',
    audio: '',
    time: '2025年10月15日',
  },
])
const btnLabel = ref('收起')
const switchBtnClick = () => {
  btnLabel.value = btnLabel.value === '展开' ? '收起' : '展开'
}

async function initCharts1() {
  // 获取主流关系统计数据

  const charts1 = echarts.init(document.getElementById('charts1') as HTMLDivElement)
  const option = {
    title: {
      text: '轨道周期/海拔时间序列',
      textStyle: {
        color: '#eee',
        fontSize: 12,
      },
    },
    grid: {
      left: 10, // 默认 10%；数值或百分比都行，按需增大
      bottom: '10%',
      containLabel: true, // 避免再被截断
    },
    textStyle: {
      color: '#eee',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: 20,
      data: ['远地点高度', '近地点高度', '轨道周期'],
      textStyle: {
        color: '#eee', // 图例文字颜色
      },
    },
    xAxis: {
      type: 'category',
      data: ['2020/1/19', '2020/1/20', '2020/1/21', '2020/1/22', '2020/1/23', '2020/1/24', '2020/1/25'],
    },
    yAxis: [
      {
        type: 'value',
        // name: '轨道周期（分钟）',
        position: 'left',
        splitNumber: 5, // 👈 控制刻度数量
        axisLabel: {
          formatter: '{value} min',
        },
      },
      {
        type: 'value',
        // name: '海拔（km）',
        position: 'right',
        splitNumber: 5, // 👈 控制刻度数量
        axisLabel: {
          formatter: '{value} km',
        },
      },
    ],
    series: [
      {
        name: '远地点高度',
        type: 'line',
        yAxisIndex: 1, // 右侧轴
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '近地点高度',
        type: 'line',
        yAxisIndex: 1, // 右侧轴
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '轨道周期',
        type: 'line',
        yAxisIndex: 0, // 左侧轴
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  }
  option && charts1.setOption(option)
}
watch(activeName, () => {
  if (activeName.value === '特殊行为分析') {
    nextTick(() => {
      initCharts1()
    })
  }
})
const satellite = ref<SatelliteDetail>()
const loadSatelliteDetail = async (id: number) => {
  if (id) {
    const res = await getSatelliteDetail({ norad: id })
    if (res.code === 200) {
      console.log(res.data)
      satellite.value = res.data
    }
  }
}
onMounted(() => {
  nextTick(() => {
    // 初始化图表
    initCharts1()
  })
  const id = Number(route.params.id)
  loadSatelliteDetail(id)
  console.log(id)
})
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  height: calc(100vh - 60px);
  gap: 2px;
  grid-template-columns: 1fr 2fr 1fr;
  .left {
    background: var(--menu-bg-color);
    padding: 10px;
    .left-1 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1.5fr 1fr;

      .left-1-1 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        & > div {
          display: flex;
          align-items: center;
          font-size: 12px;
          min-height: 30px;
        }
        & > div:first-child {
          flex: 1;
          font-size: 24px;
          font-weight: bold;
          gap: 20px;
        }
      }
      .desc-item {
        padding-top: 10px;
        font-size: 12px;

        min-height: 25px;
        display: flex;
        & > span:first-child {
          width: 30%;
          text-align: left;
          color: #bcbcbc;
        }
      }
    }
    .left-2 {
      padding: 10px;
      background: var(--app-bg-color);
      margin-bottom: 10px;
      .left-2-1 {
        display: flex;
        padding-bottom: 10px;
      }
      .left-2-2 {
        & > div {
          text-align: left;
          font-size: 12px;
          line-height: 22px;
        }
      }
    }
    .left-3 {
      padding: 10px;
      margin-bottom: 10px;
      background: var(--app-bg-color);
      display: flex;
      .left-3-item {
        display: flex;
        flex-direction: column;
        flex: 1;
        & > span:last-child {
          font-size: 12px;
        }
      }
    }
    .left-4 {
      padding: 10px;
      margin-bottom: 10px;
      background: var(--app-bg-color);
      .left-4-title {
        display: flex;
      }
      .left-4-1 {
        display: flex;
        padding-top: 10px;
        & > span:first-child {
          color: #bcbcbc;
        }
        & > span {
          width: 50%;
          text-align: left;
          font-size: 13px;
        }
      }
    }
    .left-5 {
      padding: 10px;
      background: var(--app-bg-color);
      .left-5-title {
        display: flex;
        padding-bottom: 5px;
      }
      .img-box {
        width: 100%;
        max-height: 120px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .left-5-1 {
        display: flex;
        padding-top: 10px;
        & > span:first-child {
          color: #bcbcbc;
        }
        & > span {
          width: 50%;
          text-align: left;
          font-size: 13px;
        }
      }
    }
  }
  .center {
    background: var(--menu-bg-color);
    border: 1px solid var(--menu-bg-color);
    display: grid;
    grid-template-rows: minmax(auto, 1.5fr) 1fr;

    .center-top-tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--app-bg-color);
      height: 30px;
      padding: 10px;
      .tab-item {
        cursor: pointer;
        padding: 5px 10px;
        &.active {
          border-bottom: 2px solid #2367a0;
        }
      }
    }
    .tab-1 {
      .tab-1__type {
        .tab-1__type__btns {
          display: flex;
          padding: 5px;
          flex-wrap: wrap;
          .atlas-app-button {
            &.active {
              background: #2367a0;
            }
          }
        }
        .tab-1__time {
          min-width: 150px;
          display: flex;
          align-items: center;
          .tab-1__timetitle {
            font-size: 12px;
            min-width: 50px;
          }
        }
      }

      .tab-1__bd {
        .tab-1__bd_tabs {
          background: var(--app-bg-color);
          padding: 5px;
          display: flex;
          & > span {
            display: inline-block;
            width: 100px;
            margin-right: 5px;
            padding: 5px;
            background: var(--menu-bg-color);
            cursor: pointer;
            &.active {
              background: #2367a0;
            }
          }
        }
      }
      .tab-1_bd__content {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 3px;
        .bd_title {
          text-align: left;
          font-size: 12px;
          padding: 5px;
          width: 100%;
        }
        .tab-1_bd__content__left {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .tab-1_bd__content__center {
          display: flex;
          flex-direction: column;
          gap: 2px;
          .bd-zb__item {
            background: var(--app-bg-color);

            font-size: 12px;
            flex: 1;
            padding: 5px;
            & > div {
              text-align: left;
              padding: 2px;
            }
            & > div:last-child {
              background: #2367a0;
            }
          }
        }
        .tab-1_bd__content__right {
          padding: 5px;
          .grid-title {
            display: grid;
            grid-template-columns: 2fr 1fr;
            margin-bottom: 5px;
            .his {
              display: flex;
              flex-direction: column;
              align-items: start;
              justify-content: start;
              font-size: 12px;
              & > div:first-child {
                font-size: 14px;
                padding-bottom: 10px;
              }
            }
            .time {
              display: flex;
              justify-content: end;
              align-items: center;
              gap: 5px;
              .timetitle {
                font-size: 12px;
              }
              .select {
                width: 80px;
              }
            }
          }
          .grid-count {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            background: var(--app-bg-color);
            margin-bottom: 5px;
            div {
              display: flex;
              flex-direction: column;
              gap: 5px;
              align-items: center;
              justify-content: center;
              padding: 5px;
              & > span:first-child {
                font-weight: bold;
              }
              & > span:last-child {
                font-size: 12px;
                color: #bcbcbc;
              }
            }
          }
          .mod-tabs-box {
            background: var(--app-bg-color);
            .mod-tabs {
              padding: 5px;
              background: var(--app-bg-color);
              display: flex;
              & > span {
                display: inline-block;
                width: 100px;
                margin-right: 5px;
                padding: 3px 0;
                font-size: 12px;
                background: var(--menu-bg-color);
                cursor: pointer;
                &.active {
                  background: #2367a0;
                }
              }
            }
            .mod-content {
              display: grid;
              grid-template-columns: 1fr 3fr;

              .l-box {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: stretch;
                div {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  padding: 10px;
                  margin: 5px;
                  background: var(--menu-bg-color);
                  & > span:first-child {
                    font-size: 18px;
                    font-weight: bold;
                  }
                  & > span:last-child {
                    font-size: 12px;
                  }
                }
              }
              .r-box {
                min-height: 240px;
              }
            }
          }
        }
      }
    }
    .tab-2 {
      padding: 10px;
      .grid-zh {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        .l-zh {
          border: 2px solid #2367a0;
          padding: 5px;
          background: var(--app-bg-color);
          font-size: 12px;
          .title {
            text-align: left;
            padding-bottom: 10px;
          }
          .grid-ty {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 5px;
            div {
              padding: 5px;
              border: 2px solid #2367a0;
              display: flex;
              justify-content: space-between;
            }
            .span2 {
              grid-column: 1 / -1; //独占整行
            }
            .span2-col {
              grid-column: 1 / -1; //独占整行
              display: flex;
              flex-direction: column;
              align-items: start;
            }
          }
        }
        .r-zh {
          border: 2px solid #2367a0;
          padding: 5px;
          background: var(--app-bg-color);
          font-size: 12px;
          .cs-box {
            border: 2px solid #2367a0;
            &:first-of-type {
              margin-bottom: 5px;
            }
            .mod-tabs-box {
              .mod-tabs {
                padding: 0 0 5px 0;
                background: var(--app-bg-color);
                display: flex;
                & > span {
                  display: inline-block;
                  width: 100px;
                  padding: 3px 0;
                  font-size: 12px;
                  background: var(--menu-bg-color);
                  cursor: pointer;
                  &.active {
                    background: #2367a0;
                  }
                }
              }
              .cs-content {
                padding: 10px;
                text-align: left;
              }
            }
          }
        }
      }
    }
    .tab-3 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 10px;
      .l-wx {
        background: var(--app-bg-color);
        border: 2px solid #2367a0;
        .mod-tabs-box {
          .mod-tabs {
            display: flex;
            & > span {
              display: inline-block;
              width: 100px;
              padding: 3px 0;
              font-size: 12px;
              background: var(--menu-bg-color);
              cursor: pointer;
              &.active {
                background: #2367a0;
              }
            }
          }
          .wx-content {
            text-align: left;
            font-size: 14px;
            .wx-item {
              border: 2px solid #2367a0;
              margin: 10px;
              padding: 10px;
              div {
                padding-bottom: 5px;
                display: flex;
                align-items: center;
                div {
                  padding-right: 30px;
                }
              }
            }
          }
        }
      }
      .r-wx {
        background: var(--app-bg-color);
        border: 2px solid #2367a0;
        font-size: 12px;
        padding: 10px;
        .title,
        .nav-bar {
          padding-bottom: 10px;
          display: flex;
          gap: 10px;
          align-items: center;
          .select {
            display: inline-block;
            width: 80px;
            flex: 1;
            padding-bottom: 0;
          }
        }
        .lswx-content {
          border: 2px solid #2367a0;
          padding: 5px;
          display: flex;
          flex-direction: column;
          .lswx-item {
            .top1 {
              display: flex;
              justify-content: space-between;
              .btn {
                cursor: pointer;
              }
            }
            .title-yc {
              width: 100%;
              display: flex;
              align-items: center;
              gap: 10px;
            }

            .yc-content {
              width: 100%;
              display: block;
              div {
                text-align: left;
              }
            }
          }
        }
      }
    }
    .tab-4 {
      .tab-1__type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px;
        min-height: 40px;
        .tab-1__type__btns {
          .atlas-app-button {
            &.active {
              background: #2367a0;
            }
          }
        }
        .tab-1__time {
          min-width: 150px;
          display: flex;
          align-items: center;
          .tab-1__timetitle {
            font-size: 12px;
            min-width: 50px;
          }
        }
      }
      .tab-4__content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        & > div {
          padding: 10px;
          background: var(--app-bg-color);
          text-align: left;
          font-size: 14px;
          border: 2px solid #2367a0;
        }
        .l-box {
          margin: 20px 0 20px 5px;
          border-right: 0;
          & > div:not(:first-child) {
            background: var(--menu-bg-color);
            padding: 5px;
            margin: 5px 0;
            border: 2px solid #2367a0;
          }
        }
        .r-box {
          margin: 20px 5px 20px 0;
          .img-box {
            padding: 5px 0;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .tab-5 {
      .tab-2__type {
        display: flex;
        justify-content: end;
        align-items: center;
        padding: 5px;
        min-height: 40px;
        .tab-2__time {
          min-width: 150px;
          display: flex;
          align-items: center;
          .tab-2__timetitle {
            font-size: 12px;
            min-width: 50px;
          }
        }
      }
      .tab-5__content {
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin: 5px;
        padding: 5px;
        .title-box {
          text-align: left;
          padding: 5px;
        }
        .l-box {
          border: 2px solid #2367a0;
          border-right: none;
          background: var(--app-bg-color);
          .img-box {
            display: flex;
            flex-wrap: wrap;
            .img-item {
              cursor: pointer;
              width: 46%;
              height: 100px;
              padding: 2%;
              display: flex;
              flex-direction: column;
              img {
                height: 100%;
                width: 100%;
              }
              div {
                background: #2367a0;
              }
            }
          }
        }
        .r-box {
          border: 2px solid #2367a0;
          .content-box {
            text-align: left;
            padding: 5px;
            font-size: 14px;
          }
        }
      }
    }
    .tab-6 {
      .grid-wl {
        padding: 10px;
        gap: 10px;
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        .r-wl {
          .mod-tabs-box {
            background: var(--app-bg-color);
            .mod-tabs {
              background: var(--app-bg-color);
              display: flex;
              & > span {
                display: inline-block;
                width: 100px;
                padding: 3px 0;
                font-size: 12px;
                background: var(--menu-bg-color);
                cursor: pointer;
                &.active {
                  background: #2367a0;
                }
              }
            }
            .mod-content {
              display: grid;
              grid-template-columns: 1fr 3fr;

              .l-box {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: stretch;
                div {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  padding: 10px;
                  margin: 5px;
                  background: var(--menu-bg-color);
                  & > span:first-child {
                    font-size: 18px;
                    font-weight: bold;
                  }
                  & > span:last-child {
                    font-size: 12px;
                  }
                }
              }
              .r-box {
                min-height: 240px;
              }
            }
          }
          .wl-content {
            padding: 10px;
            font-size: 12px;
            text-align: left;
            .imgbox {
              width: 120px;
              height: auto;
              display: flex;
              padding: 10px 0;
              gap: 10px;
              div {
                display: flex;
                flex-direction: column;
                div {
                  padding: 5px;
                  background: var(--menu-bg-color);
                }
              }
            }
          }
        }
      }
    }
    .center-bottom {
      margin-top: 10px;
      .center-bottom_tabs {
        background: var(--app-bg-color);
        padding: 5px;
        display: flex;
        & > span {
          display: inline-block;
          width: 100px;
          margin-right: 5px;
          padding: 5px;
          background: var(--menu-bg-color);
          cursor: pointer;
          &.active {
            background: #2367a0;
          }
        }
      }
      .center-bottom_content {
        padding: 10px;
        .grid-box {
          display: grid;
          grid-template-columns: 150px auto;
          .grid-box_l {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            & > div:first-child {
              display: flex;
              gap: 5px;
            }
            & > div:last-child {
              display: flex;
              gap: 5px;
            }
          }
          .grid-box_r {
            padding: 5px 10px;
            margin-right: 20px;
            border: 2px solid #2367a0;
            & > div:first-child {
              text-align: left;
            }
            & > div:last-child {
              text-align: left;
              font-size: 12px;
              color: #bcbcbc;
            }
          }
        }

        .qbjc-search {
          display: flex;
          gap: 10px;
          align-items: center;
          font-size: 12px;
        }
        .qbjc-content {
          padding: 10px 0;
          display: flex;
          align-items: top;
          gap: 5px;
          justify-content: space-between;
          flex-wrap: wrap;
          .qbjc-item {
            width: 32.5%;
            .qbjc-img {
              img {
                width: 100%;
              }
            }
            .qbjc-title {
              text-align: left;
              font-size: 14px;
            }
            .qbjc-source {
              font-size: 12px;
              color: #cdcdcd;
              display: flex;
              gap: 10px;
            }
          }
        }
        .fzqb-content {
          padding: 10px 0;
          .fzqb-item {
            padding: 10px;
            margin-bottom: 10px;
            background: var(--app-bg-color);
            .fzqb-title {
              text-align: left;
              font-size: 14px;
            }
            .fzqb-article {
              text-align: left;
              font-size: 12px;
              color: #cdcdcd;
              padding: 10px 0;
            }
            .fzqb-source {
              display: flex;
              justify-content: start;
              font-size: 12px;
              gap: 10px;
              color: #cdcdcd;
            }
          }
        }
      }
    }
  }
  .right {
    background: var(--menu-bg-color);
    border: 1px solid var(--menu-bg-color);
    .right_tabs {
      background: var(--app-bg-color);
      padding: 5px;
      display: flex;
      & > span {
        display: inline-block;
        width: 50%;
        margin-right: 5px;
        padding: 5px;
        background: var(--menu-bg-color);
        cursor: pointer;
        &.active {
          background: #2367a0;
        }
      }
    }
    .right_tabs_content_item {
      padding: 10px;
      .title {
        display: flex;
        position: relative;
        align-items: center;
        padding-bottom: 5px;
        &::before {
          content: '';
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #87ceeb;
          margin-right: 8px;
          vertical-align: middle;
          // transform: rotate(45deg);
          margin-bottom: 3px;
          /* 正方形转 45° 就是菱形 */
        }
      }
      .item {
        border: 1px solid #2367a0;
        background: var(--app-bg-color);
        padding: 5px;
        .item-title {
          font-size: 12px;
          text-align: left;
          padding: 10px 0;
        }
        .son {
          border: 1px solid #2367a0;
          background: var(--menu-bg-color);
          .son-tag {
            display: flex;
            padding: 5px 10px;
          }
          .son-item {
            padding: 5px 10px;
            background: var(--app-bg-color);
            margin: 5px;
            text-align: left;
            font-size: 12px;
          }
        }
      }
    }
  }
}
</style>
